<template>
  <div class="ma-content-block p-4">
    <ma-crud :options="crud" :columns="bannerColumns" ref="crudRef">
      <template #tableAfterButtons>
        <a-button
            @click="openCate"
            type="outline"
            status="success"
        ><template #icon><icon-apps /> </template>分类管理</a-button>
      </template>

      <template #logo_path="{ record }">
        <a-image :src="record.logo_path ? $tool.showFile(record.logo_path):''" height="80" />
      </template>
      <!--           排序列-->
      <template #sort="{ record }">
        <a-input-number
            :default-value="record.sort"
            mode="button"
            @change="bannerChangeSort($event, record.id)"
            :min="0"
            :max="1000"
        />
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
            :checked-value="1"
            :unchecked-value="2"
            @change="bannerChangeStatus($event, record.id)"
            :default-checked="record.status == 1"
        />
      </template>
    </ma-crud>

    <activity-cate ref="cateRef" />
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'

import activityCate from './components/cpsCate.vue'

import api from '@/api/prm/cps.js'
import jumpConf from '@/config/const.js'
import { Message } from '@arco-design/web-vue'

const jumpTbColumn = jumpConf.jumpTbColumn

const crudRef = ref()
const cateRef = ref()

//排序
const bannerChangeSort = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'sort' })
  if (response.success) {
    Message.success(response.message)
  }
}
//状态
const bannerChangeStatus = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'status' })
  if (response.success) {
    Message.success(response.message)
  }
}

const openCate = () => {
  cateRef.value.open()
}

//表格
const crud = reactive({
  api: api.list,
  showIndex: false,
  // pageLayout: 'fixed',
  showTools:false,
  // tablePagination:true,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 180,
  searchColNumber:3,
  add: {show: true, api: api.add, auth: ['prm:cps:save']},
  edit: {show: true, api: api.update, auth: ['prm:cps:update']},
  delete: {
    show: true,
    api: api.delete, auth: ['prm:cps:delete'],
  },
  formOption: {viewType: 'drawer', width: 800},
  beforeOpenAdd: () => {
    // bannerColumns[2].addDefaultValue = "n"
    return true
  },
})

const bannerColumns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {
    title: '标题', dataIndex: 'title', formType: 'input', search: true, width: 80,
  },
  {
    title: 'LOGO', dataIndex: 'logo_path', search: false, commonRules: [{required: true, message: '必须上传logo'}],
    width: 100, formType: 'upload',type:'image'
  },
  {
    title: '所属分类', dataIndex: 'cate_id', search: true, width: 200,multiple:false,
    formType: 'select', dict: { url: 'prm/cps_cate/list', props: { label: 'name', value: 'id' }, translation: true }
  },
  {
    title: '排序', dataIndex: 'sort', formType: 'input-number', addDefaultValue: 1, width: 180,
  },
  {
    title: '启用', dataIndex: 'status', search: false, formType: 'radio',
    dict: {name: 'data_status', props: {label: 'title', value: 'key'}},
    addDefaultValue: 1, width: 120
  },
  ...jumpTbColumn,
  {
    title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: false, formType: 'range', width: 180
  }])

</script>

<script>
export default {name: 'prm:cps'}
</script>

<style scoped>

</style>
